import React from 'react'
import PageTitle from 'component/page-title/index.jsx'
import {Link} from 'react-router-dom'
import Pagination from 'util/pagination/index.jsx'
import TableList from 'util/table-list/index.jsx'
import ListSearch from './index-list-search.jsx'

import MUtil from 'util/mm.jsx'
const __mm=new MUtil();

import Order from 'service/order-service.jsx'
const __order=new Order();

class OrderList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            pageNum:1,
            list:[],
            listType:'list' //list或者search
        }
    }
    componentDidMount(){
        this.loadOrderList();
    }
    loadOrderList(){
        let listParam={};
        listParam.listType=this.state.listType;
        listParam.pageNum=this.state.pageNum;
        if(this.state.listType === 'search'){
            listParam.orderNo=this.state.orderNumber;
        }
        __order.getOrderList(listParam).then(res=>{
            this.setState(res);
        },errMsg=>{
            this.setState({
                list:[]
            })
            __mm.errorTips(errMsg);
        });
    }
    //当页数发生变化的时候
    onPageNumChange(pageNum){
        this.setState({
            pageNum:pageNum
        },()=>{
            this.loadOrderList();
        })
    }
    //搜索
    onSearch(orderNumer){
        let listType=orderNumer === '' ? 'list' : 'search';
        this.setState({
            listType:listType,
            pageNum:1,
            orderNumber:orderNumer
        },()=>{
            this.loadOrderList();
        })
    }
    render(){
        let tableHeads=[
            {name:'订单号',width:'10%'},
            {name:'收件人',width:'40%'},
            {name:'订单状态',width:'10%'},
            {name:'订单总价',width:'15%'},
            {name:'创建时间',width:'15%'},
            {name:'操作',width:'10%'}
        ]
        return (
            <div id="page-wrapper">
                <PageTitle title="订单列表" />
                <ListSearch onSearch={(orderNumber)=>{this.onSearch(orderNumber)}} />
                <TableList tableHeads={tableHeads}>
                    {
                        this.state.list.map((order,index)=>{
                            return(
                                <tr key={index}>
                                    <td>
                                        <Link to={`/order/detail/${order.orderNo}`}>{order.orderNo}</Link>
                                    </td>
                                    <td>{order.receiverName}</td>
                                    <td>{order.statusDesc}</td>
                                    <td>{order.payment}</td>
                                    <td>{order.createTime}</td>
                                    <td>
                                        <Link to={`/order/detail/${order.orderNo}`}>详情</Link>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </TableList>
                <Pagination current={this.state.pageNum} total={this.state.total} onChange={(pageNum)=>this.onPageNumChange(pageNum)} />
            </div>
        )
    }
}
export default OrderList;